<template>
    <h1>父传子</h1>
    <h3>{{ msg }}</h3>
    <h3>{{ num }}</h3>
    <h3>{{ obj }}</h3>
    <button @click="change">点击修改</button>
    <!-- 1.在父组件中使用子组件 -->
    <Child :msg="msg" :obj="obj"></Child>
    <!-- 2.给子组件标签中动态绑定属性传参 -->
    <!-- 3.子组件里面通过defineProps进行数据接收 -->


    <Child ref="childInfor"></Child>

</template>

<script setup lang='ts'>
import { reactive, ref ,onMounted} from 'vue';
import Child from './Child.vue';

let msg=ref("hello world");
let num=ref(123);
let obj=reactive({
    name:"小米",
    age:18
})
let change=()=>{
    msg.value="你吃了吗？";
    num.value=6666;
    obj.age=88;
    obj.name="张三";
}


let childInfor=ref(null);
onMounted(()=>{
    console.log(childInfor);
    childInfor.value.fn();
})

// 暴露父组件里面的数据
defineExpose({
    fatherMessage:"father111111111",
    fatherFn:function(){
        console.log("父组件的方法");
    }
})
</script>

<style scoped>

</style>
